/**
 * 管理员详细信息页面
 * @author 韩睿倩
 */
<template>
    <div class="user-personal-center">
        <el-row>
            <el-col :span="8">
                <h3></h3>
            </el-col>
            <el-col :span="8">
                <el-card shadow="always">
                    <el-form ref="userInfoTable" :label-position="labelPosition" label-width="auto"
                        :model="userInfoTable" :rules="userInfoRules">
                        <el-form-item label="昵称" prop="nickname">
                            <el-input v-model="userInfoTable.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="userInfoTable.sex" placeholder="请选择性别">
                                <el-option label="男" value="m"></el-option>
                                <el-option label="女" value="f"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="生日" prop="birthday">
                            <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                                v-model="userInfoTable.birthday"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="学历" prop="education">
                            <el-select v-model="userInfoTable.education" placeholder="请选择学历">
                                <el-option label="博士" value="博士"></el-option>
                                <el-option label="硕士" value="硕士"></el-option>
                                <el-option label="本科" value="本科"></el-option>
                                <el-option label="大专" value="大专"></el-option>
                                <el-option label="高中" value="高中"></el-option>
                                <el-option label="初中" value="初中"></el-option>
                                <el-option label="小学" value="小学"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学校" prop="school">
                            <el-input v-model="userInfoTable.school"></el-input>
                        </el-form-item>
                        <el-form-item label="职业" prop="career">
                            <el-input v-model="userInfoTable.career"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button @click="handleUserInfoChange" type="primary" round
                        style="width: -webkit-fill-available;">保存</el-button>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>

import { modifyUserInfo, getUserInfo } from '@/api/user/userBasicApi.js'

export default {
    name: "adminInfoPage",
    data() {
        return {
            labelPosition: "right",
            userInfoTable: {
                nickname: "",
                sex: "",
                birthday: "",
                education: "",
                school: "",
                career: "",
            },

            userInfoRules: {
                nickname: [
                    { required: true, trigger: "blur", message: "请输入昵称" },
                    { min: 1, max: 20, message: '用户账号长度必须介于 1 和 20 之间', trigger: 'blur' }
                ],
                school: [
                    { required: false, trigger: "blur", message: "请输入学校" },
                    { min: 1, max: 20, message: '字符长度必须介于 1 和 20 之间', trigger: 'blur' }
                ],
                career: [
                    { min: 1, max: 20, message: '字符长度必须介于 1 和 20 之间', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        userId() {
            return this.$store.getters.userId
        }
    },

    methods: {
        handleUserInfoChange() {
            this.$refs.userInfoTable.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.userInfoTable['userId'] = Number(this.userId)
                    modifyUserInfo(this.userInfoTable).then(res => {
                        console.log(res)
                        // 根据返回结果状态码判断
                        this.$alert('<font color="red">' + res.message + ' </font>', '系统提示', { dangerouslyUseHTMLString: true, type: res.resultCode == '200' ? 'success' : 'error' })
                            .then(() => { })
                            .catch(() => { });
                    }).catch(() => { }).then(() => { this.loading = false; })
                }
            })
        }
    },
    created() {
        getUserInfo(this.userId).then(res => {
            console.log(res.data)
            this.userInfoTable = res.data;
        }).catch(err => { console.log(err) })
    }
}
</script>

<style scoped>
.div {
    align-items: center;
    justify-content: center;
}

.el-card {
    margin-top: 100px;
    width: 600px;
    /* height: 600px; */

}

.el-card__body {
    padding: 30px;
}
</style>